<template>
    <div class="header">
        <h3>欢迎来到莉莉娅的blog</h3>
        <div>
            <el-avatar shape="square" :size="100" :src=user.avatar></el-avatar>
        </div>
        <div>{{user.username}}</div>

        <div class="header1">
            <span><el-link type="primary" href="/blogs">首页</el-link></span>
            <el-divider direction="vertical"></el-divider>
            <span> <el-link  type="success" href="/blog/add">新增文章</el-link></span>
            <el-divider direction="vertical"></el-divider>
            <span v-show="hasLogin"><el-link type="danger" @click="logout">退出</el-link></span>
            <span v-show="!hasLogin"><el-link type="primary" href="/login">登录</el-link></span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data(){
            return{
                user:{
                    username:'请先登录',
                    avatar:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
                },
                hasLogin:false
            }
        },
        methods:{
            logout(){
                const _this = this
                _this.$axios.get('/logout',{
                    headers:{
                        'Authorization':localStorage.getItem('token')
                    }
                }).then(res=>{
                    _this.$store.commit('REMOVE_INFO')
                    _this.$router.push('/login')
                })

            }
        },
        //创建页面时候的生命周期钩子
        created() {
            if (this.$store.getters.getUserInfo.username){
                this.user.username = this.$store.getters.getUserInfo.username
                this.user.avatar = this.$store.getters.getUserInfo.avatar
                this.hasLogin = true
            }
        }
    }
</script>

<style scoped>
    .header{
        max-width: 960px;
        margin: 0 auto;
        text-align: center;
    }
    .header1{
        margin: 20px;
    }
</style>